Hasta no hace mucho yo pensaba que para añadir el efecto Mouseover era necesario hacerlo con javascript, pero he descubierto que también puede hacerse con CSS.
En xyberneticos he visto un menú de vikiworks que me ha gustado mucho, es un sencillo texto con una segunda línea donde podemos añadir una breve descripción.

Lo podemos aplicar a nuestro blog añadiendo unas líneas en los CSS que podrán ser modificadas respecto a color. Nos situamos en nuestra plantilla edición de HTML, justo antes de ]]></b:skin> añadimos lo siguiente:

#menu {margin:0;padding:0; }
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}

Luego añadimos un elemento de página y en HTML/Javascript agregamos:

<div id="menu"><ul>
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>





Donde Menu01-Menu02-Menu03 es el texto que visionamos y hace las veces de enlace.
El arterisco ( # ) lo sustituimos por la url de la página que vamos a enlazar.
"Short desc" es el subtitulo, texto o breve descripción que podemos añadir, de no desearlo lo suprimimos.

Diseño Blog

TJPzoom - Efecto lupa en las imágenes

Earth Hour 2008

SearchIcon - Buscador de iconos

Befunky - Herramienta para crear caricaturas.

Font Tester. Generador de código CSS

Nerdbusiness 5.978 iconos

Premio "Calidez"

BTemplates, todas las Plantillas Blogger en un solo lugar.

Eliminar iconos-personalizar blogroll de Blogger

FaceInHole "Crea un personaje famoso con tu rostro "

Inhabilitar botón derecho en todo el blog.

Buscador dinámico de Google

Listamatic2- Menús verticales y horizontales

SMASHING MAGAZINE - Logos.Tutoriales. Iconos. CSS

 


top